{% extends "base.html" %}
{% load staticfiles %}

{% block title %}首页{% endblock %}

{% block nav_home_active %}
active
{% endblock %}

{% block style %}
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
{% endblock %}


{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <h3 class="home-content">欢迎来到我的博客</h3>
        </div>

    </div>
</div>
<div id="container"></div>
<!-- <h3>今日热门点击</h3>
    <ul>
        {% for hot_data in today_hot_data %}
            <li>
                <a href="{% url 'blog_detail' hot_data.object_id  %}">
                    {{ hot_data.content_object.title }}
                </a>
                ({{ hot_data.read_num }})
            </li>
        {% empty %}
            <li>今天暂时没有热门博客</li>
        {% endfor %}
    </ul> -->

<div class="pg-footer">
    <p>
        &copy;<span> Xin.I.D.E.A</span>
    </p>
    <p>
        <a href="http://www.miitbeian.gov.cn/" target="_blank">蜀ICP备18006230号-1</a>
    </p>
</div>

<script>
    // 图表配置

    var options = {
        chart: {
            type: 'line' //指定图表的类型，默认是折线图（line）
        },
        title: {
            text: null // 标题
        },
        xAxis: {
            categories: JSON.parse('{{ dates|safe }}'), // x 轴分类
            tickmarkPlacement: 'on',
            title: {
                text: "前7日阅读量"
            }
        },
        yAxis: {
            title: {
                text: null // y 轴标题
            },
            labels: {
                enabled: false
            },
            gridLineDashStyle: "Dash",
            gridLineColor: "#67CB81"

        },
        series: [{ // 数据列
            name: '阅读量', // 数据列名
            data: JSON.parse('{{ read_nums }}'), // 数据
        }],
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
    };
    // 图表初始化函数
    var chart = Highcharts.chart('container', options);

</script>
{% endblock %}
